/*
Order summary Page css Configuration
 */
hr.ilm{
		max-width:99%;
		margin-left:0;
	}
	.decorational{
		position: absolute;
        display: block;
        background: url('../img/site-icons.png') no-repeat -155px -67px;
        width: 11px;
        height: 7px;
	}
	span.decor3{
		@extend .decorational;
        top: 15px;
        left: 107px;
	}
	span.decor4{
		@extend .decorational;
		top:15px;
		left:107px;
	}
	span.decor5{
		@extend .decorational;
		top:15px;
		left:107px;
	}
	span.decor6{
		@extend .decorational;
		top:28px;
		left:343px;
	}
#order-summary{
	width:100%;
	margin:0;
	color:$black;
	padding-top: 91px;
	background-color: $white;
	@media(width:$mobile){
		padding-top:160px
	}
	@media(width:$mobile-max){
		padding-top:140px
	}
	@media(width:640){
		padding:115px;
	}
	.container{
		max-width:1037px;
	}
	.nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus {
         background-color:$yellow;
                 color: $black;
       }    
	h1{
		font-size: 30px;
		margin-top:25px;
		margin-bottom:25px;
		span{
			color:$dark_grey;
		}
		span:nth-child(2){
			color: black;
			font-family: verdana;
			font-weight: bold;
			font-size: 15px;
			vertical-align: middle;
			margin-left: 31px;
		}
	}
	p{
		font-family: $verdana;
		font-size: 11px;
		color:$black;
		@media (min-width: $mobile) and (max-width: $mobile-max){
		/* Media Query Between Screen 320px and 480px  */
			font-size:9px;		
		}
	}
		.create-nav{
        border: 0px;
        li{
             padding-left: 14px;
             cursor:pointer;
             @media (min-width: $mobile) and (max-width: $tablet){
			/* Media Query Between Screen 480px and 768px  */
				float:none;
				text-align: center;
				padding-left:0;
				margin-bottom: 10px;		
			}
             &:first-child{
              padding-left:0px; 
             }
            a{
              background-color: $black;
              color: $white;  
              border-radius: 0px;
              font-family: $verdana;
              padding-left: 40px;
                padding-top: 12px;
                padding-bottom: 12px;
                padding-right: 42px;
              font-weight: bold;
              font-size: 10px;
              text-transform: uppercase;
              @media (min-width: $tablet) and (max-width: $tablet-max){
				/* Media Query Between Screen 768px and 980px  */
					padding: 12px 27px;		
				}
				@media(width:768px){
					padding:12px 18px;
				}

              &:hover{
                 background-color:$yellow;
                 color: $black;
              }
                
            }
          } 
       }

       .input-group{
       	margin-top:25px;
       	margin-bottom:25px;
       	select{
       		border:2px solid $black;
       		border-radius:0;
       	}
       }
}

.order-details{
	margin: 0;
	padding:0;
	h2{
		font-size:45px;
		@media (min-width: $mobile) and (max-width: $mobile-max){
		/* Media Query Between Screen 320px and 480px  */
			font-size: 30px;			
		}
	}
	hr{
		border: 0;
		margin-left: 0;
		border-top: 1px solid #eee;
		margin-right: 0;
		width: 237px;
	}
	.single-order{
    position: relative;
    img{
    border: 1px solid $black !important;
    padding:8px;
     }
     span{
        position: absolute;
        top:0;
        background-color: rgba(230, 230, 230, 0.7);
        font-family: $lgr;
        font-size: 45px;
        color: $black;
        text-transform: uppercase;
        width: 78%;
        margin-top: 90px;
        padding: 3px 24px;
        @media (min-width: $tablet) and (max-width: $tablet-max){
		/* Media Query Between Screen 768px and 980px  */
			width:83%;		
		}
		@media(width:$tablet){
			width:100%;
		}
		@media(width:$mobile){
			width:100%;
			font-size: 30px;
			margin-top:75px;
			
		}

        small{
            font-family: $verdana;
            font-size: 10px;
            display: block;
        }
     }
}
	.input-group{
		width:100%;
		margin-top:0px !important;
		border-bottom:2px solid $light_grey;
		select{
			border:none !important;
			box-shadow: none;
			font-family: $lgr;
			font-size: 35px;
			height: 54px;
			@media (min-width: $mobile) and (max-width: $mobile-max){
			/* Media Query Between Screen 320px and 480px  */
					font-size: 30px;
			}
		}
		

	}
}
.order-summary-info{
	color:$black;
	font-family: $verdana;
	font-weight: bold;
	font-size: 12px;
	p{
		text-align: right;
		margin-bottom:15px;
		text-transform: uppercase;
		font-size: 12px;
	}
	.row{
		margin:0;
	}
	.info-box{
		margin:0;
		padding:0;
	}
	.info-box-1{
		@extend .info-box;
		p{
			text-align: left;
			margin-left:5px;
			color:$dark_grey !important;
		}
	}
}
.bill-information{
	p{
		color:$black;
		font-family:$verdana;
		font-size:12px;
		font-weight: bold;
		margin-bottom: 20px !important;
	}
	input[type="submit"]{
			@include button($black,$white,$yellow,$black);
			padding:16px 65px;
			margin-right:172px;
			margin-top:40px;
			margin-bottom: 40px;
			font-family:$verdana;
			font-weight: bold;
			@media (min-width: $tablet) and (max-width: $tablet-max){
		/* Media Query Between Screen 768px and 980px  */	
				margin-right: 100px;	
			}
			@media(width:$mobile){
				margin-right:42px;
			}
		}
	.info-box-2{
		padding:0;
		p{
			text-align: right;
		}
	}
	.info-box-3{
		padding:0;
		p{
			text-align:left !important;
			margin-left:10px !important;
			color:$dark_grey !important;
		}
		
	}
}